<template>
    <div class="training common">
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>实训中心列表</span>
                <a-input-search class="inputStyle" placeholder="搜索标题" enter-button @search="onSearch" v-model="searchValue" />
            </template>
            <div slot="right">
                <a-button type="primary" @click="add()" v-if="list.length<4">新增</a-button>
            </div>
            <div slot="table">
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="status" class="status" slot-scope="index,record">
                        <span v-if="record.status==0" style="color:red">未发布</span>
                        <span v-else style="color:green">已发布</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction">
                        <span @click="edit(record)">修改</span>
                        <confirmBox
                            @handleOk="deleteTraining(record)"
                            :typeName="'删除'"
                            :noticeInfo="record.title"
                            :noticeType="'实训'"
                        ></confirmBox>
                        <confirmBox
                            @handleOk="publish(record)"
                            v-if="record.status==0"
                            :typeName="'发布'"
                        ></confirmBox>
                        <confirmBox
                            @handleOk="stayAtTop(record)"
                            :typeName="record.stayAtTop==0?'置顶':'取消置顶'"
                        ></confirmBox>
                    </div>
                </a-table>
                
            </div>
        </innerCommon>
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '标题',
        dataIndex: 'title',
    },{
        title: '发布者',
        dataIndex: 'user',
    },{
        title: '发布时间',
        dataIndex: 'pubTime',
        width:200
    },{
        title: '发布状态',
        scopedSlots: { customRender: 'status' },
        width:100
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:200
    }
]
import {getTrainingListApi,deleteTrainingApi,publishTrainingApi,trainingStayAtTopApi,searchTrainingApi} from "@/request/api"
import innerCommon from "@/components/common/innerCommon"
import confirmBox from "@/components/common/confirmBox"

export default {
    name:'training',
    components:{innerCommon,confirmBox},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    created(){
        this.location=[{
            name:"信息发布管理",
            path:''
        },{
            name:"实训中心",
            path:'/training'
        }]
        this.init()
    },
    data(){
        return{
            location:[],
            list:[],
            columns,
            pagination:{pageSize:10,total:0},
            searchInfo:{
                pageSize:10,
                page:1,
                keyword:''
            },
            isAdd:true,
            searchValue:''
        }
    },
    methods:{
        init(){
            this.getToken(getTrainingListApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({...item,index:(this.searchInfo.page-1)*10+index+1,'user':item.user?item.user.name:''}))
                this.pagination.total=res.data.count
            })
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.init()
        },
        onSearch(data){
            this.searchInfo.keyword=data.trim()
            this.getToken(searchTrainingApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({...item,index:(this.searchInfo.page-1)*10+index+1,'user':item.user?item.user.name:''}))
                this.pagination.total=res.data.count
            })
        },
        add(){
            this.$router.push({path:'/trainingAdd'})
        },
        edit(data){
            this.$router.push({path:'/trainingAdd',query:{id:data.id}})
        },
        deleteTraining(data){
            this.getToken(deleteTrainingApi,{'trainingId':data.id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        publish(data){
            this.getToken(publishTrainingApi,{'trainingId':data.id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        stayAtTop(data){
            this.getToken(trainingStayAtTopApi,{'trainingId':data.id,'stayAtTop':data.stayAtTop==0?1:0},res=>{
                this.$message.success(res.message)
                this.init()
            })
        }
    }
}
</script>
<style lang="stylus" scoped>

</style>